<!doctype html>
<html><head>
	<meta charset="utf-8">
	<title>[(${dto.menu.title})]</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js?v=c"></script>
	<link rel="stylesheet" href="/static/admin/css/mini-ease.css" media="all" />
	
	<!-- iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />
	
</head>
<style>
	.layui-table-header .layui-table-cell{
		height:auto;
		overflow:visible;
		text-overflow:inherit;
		white-space:normal;
		line-height: 25px;
		word-break: break-all;
	}

</style>
<body style="padding: 10px 0 0 10px;">
	
	<div class="layui-row layui-col-space5" style="width:100%;">
		<!-- 左边面板【start】 -->
		<div class="layui-col-md10" id="id_panel_left_grid">
			<div class="layui-panel" style="overflow: auto; padding-top: 0.2rem;">
				<div class="mid-content">
					
					<table class="layui-hide" id="main_table" lay-filter="main_table"></table>
					 
	<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<a th:each="button : ${dto.toolbar.buttonArr}" class="layui-btn layui-btn-normal layui-btn-xs" th:lay-event="${button.event}"><i class="iconfont" th:classappend="${button.icon}"></i>[(${button.name})]</a>
	</div>
	</script>

	
	<script type="text/html" id="templet_index_no">
	{{d.LAY_TABLE_INDEX+1}}
	</script>

					
					<script th:inline="javascript">
					layui
						.extend({optimizeSelectOption: '/static/plugins/layui/extends/optimizeSelectOption/optimizeSelectOption'})
						.use(['form', 'element', 'table', 'dropdown', 'optimizeSelectOption', 'util', 'laydate'], function(){
						var element = layui.element;
						var table = layui.table;
						var dropdown = layui.dropdown;
						var form = layui.form;
						var util = layui.util;
						var $ = layui.jquery;
						var laydate = layui.laydate;


						var colmsg = [(${dto.colGrids})];
						console.log('colmsg',colmsg);
						var colNew = [];

							for(var i=0;i<colmsg.length;i++){
								if(!(colmsg[i].type == 'checkbox' || colmsg[i].title == '序号') ){
									if(colmsg[i].field == 'backProportion'){//回款占比
										var thisInfo ={
											title: '回款占比（销售额）',field: 'backProportion',width: '120',align: 'center',
											templet: function(d){
												// 返回模板内容
												if(parseFloat(d.backProportion)<= 35 ){
													return '<span style="color: red">'+ d.backProportion +'%' + '</span>';
												} else {
													return '<span style="color: black">'+ d.backProportion+'%' + '</span>';
												}
											}
										}
										colNew.push(thisInfo);
									}else if(colmsg[i].field == 'procureProportion'){//采购占比
										var thisInfo ={
											title: '采购占比（回款）',field: 'procureProportion',width: '120',align: 'center',
											templet: function(d){
												// 返回模板内容
												if(parseFloat(d.procureProportion)>= 50 ){
													return '<span style="color: red">'+ d.procureProportion+'%' + '</span>';
												} else {
													return '<span style="color: black">'+ d.procureProportion+'%' + '</span>';
												}
											}
										}
										colNew.push(thisInfo);
									}else if(colmsg[i].field == 'firstLegProportion'){//头程占比
										var thisInfo ={
											title: '头程占比（回款）',field: 'firstLegProportion',width: '120',align: 'center',
											templet: function(d){
												// 返回模板内容
												if(parseFloat(d.firstLegProportion)>= 20 ){
													return '<span style="color: red">'+ d.firstLegProportion+'%' + '</span>';
												} else {
													return '<span style="color: black">'+ d.firstLegProportion+'%' + '</span>';
												}
											}
										}
										colNew.push(thisInfo);
									}else{
										colNew.push(colmsg[i]);
									}


								}
							}

                            var cols =[ //表头
                                //以下是一级表头
                                [
                                    {title: '', type: 'checkbox',  unresize: true, width: '40', rowspan:2},
                                    {title: '序号',  unresize: true, width: '50', align: 'center', templet: "#templet_index_no", rowspan:2},
                                    {title: '运营组月基本情况', colspan:5, align:"center"},
                                    {title: '运营组月订单情况', colspan:11, align:"center"},
                                    {title: '运营组月利润情况', colspan:10, align:"center"}
                                ]
                            ];
                            cols.push(colNew);
						// 创建渲染实例
						table.render({
							elem: '#main_table'
							,url:'[(${dto.menu.pathGridRequest})]' // 此处为静态模拟数据，实际使用时需换成真实接口
							,toolbar: '#toolbarDemo'
							,defaultToolbar: ['filter', 'print', {
									title: '导出数据'
									,layEvent: 'LAYTABLE_EXPORT_DATA'
									,icon: 'layui-icon-export'
								}, {
									title: '刷新页面'
									,layEvent: 'LAYTABLE_REFRESH'
									,icon: 'layui-icon-refresh'
								}]
							,height: window.innerHeight - 40 // 最大高度减去其他容器已占有的高度差
							,limit : 20
							,limits : [20,50,200,500]
							,where: getConds()
							,cellMinWidth: 95
							//,totalRow: true // 开启合计行，true开启，false关闭
							,page: true
							,request: {
								pageName: 'page',
								limitName: 'size'
							}
							//,skin: 'row'
							,even: true // 开启隔行背景
                            ,skin: 'grid'//设置表格边框风格
							,cols:cols
							,done: function(res){
								console.log(res);
							}
							,error: function(res, msg){
								console.log(res, msg)
							}
						});

						var indexSearchForm = 0;
						// 工具栏事件
						table.on('toolbar(main_table)', function(obj){
							var id = obj.config.id;
							var checkStatus = table.checkStatus(id);
							var othis = lay(this);
							switch(obj.event){
								case 'LAYTABLE_REFRESH':
								{
									layer.confirm("确定刷新吗？",{
										btn: ['确定', '取消']
									}, function (index) {
										location.reload();
										layer.close(index);
									});
									break;
								}
								case 'LAYTABLE_EXPORT_DATA':
								{
									$.ajax({
										type: "POST",
										url: '[(${dto.menu.pathGridExportRequest})]',
										data: getConds(),
										success: function (data) {
											if (data.code == 0) {
												if(data.msg != undefined && data.msg.startsWith('http')) {
													window.open(data.msg);
												} else {
													layer.msg(data.msg);
												}
											} else {
												alert(data.msg);
											}
										}
									});
									break;
								}
							};
						});
						 
						//触发单元格工具事件
						table.on('tool(main_table)', function(obj){ // 双击 toolDouble
							var data = obj.data;
							//console.log(obj)
							if(obj.event === 'del'){
								layer.confirm('真的删除行么', function(index){
									obj.del();
									layer.close(index);
								});
							} else if(obj.event === 'edit'){
								layer.open({
									title: '编辑',
									type: 1,
									area: ['80%','80%'],
									content: '<div style="padding: 16px;">自定义表单元素</div>'
								});
							}
							/*
							else if(obj.event === '_event_text_change_on_table'){
								$(this).on('change',function(e){
									var val = $(this).val();
									var name = $(this).attr('name');
									data[name] = val
									obj.update(data);//更新行对象数据
									layer.msg(val);
									console.log(obj + val);
								})
								return;
							}
							*/
						});
						
						//触发表格复选框选择
						table.on('checkbox(main_table)', function(obj){
							console.log(obj)
						});
						 
						//触发表格单选框选择
						table.on('radio(main_table)', function(obj){
							console.log(obj)
						});
						
						// 行单击事件
						table.on('row(main_table)', function(obj){

						});
						// 行双击事件
						table.on('rowDouble(main_table)', function(obj){
							//lookDetail(obj.data.operateCompanyId)
						});

					
						// 更新table的cache
						function modifyTableCacheBySwitch(data, value) {
						    var table = layui.table;
						    var switchElem = $(data.elem);
						    var tdElem = switchElem.closest('td');
						    var trElem = tdElem.closest('tr');
						    var tableView = trElem.closest('.layui-table-view');
						    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = value;
							
							var dataCommit = {};
							dataCommit['[(${dto.primaryKey})]'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['[(${dto.primaryKey})]'];
							dataCommit[tdElem.data('field')] = value;
							doEditOnTable(dataCommit);
						}

						

					});


					$('body').on("mouseenter",".layui-table-body tr",function () {
					    $(this).siblings().find("div").css("color","#142A48");
					    $(this).find("div").css("color","#4DA1FF");
					})

					//搜索
					function getConds() {
						var conditions = [];
						$(".bo-search-field").each(function(index, dom){
							var value = $(this).val();
							if (value != '') {
								conditions.push({'rangeType':$(this).attr('cond-range-type'), 'value': value, 'field':$(this).attr('name')});
							}
						});
						$(".bo-search-field-selector").each(function(index, dom){
							var value = $(this).val();
							if (value != '') {
								conditions.push({'rangeType':'t_system', 'value': value, 'field':$(this).attr('name')});
							}
						});
						return {'conditions': JSON.stringify(conditions)};
					}
					</script>
				</div>
			</div>
		</div>
		<!-- 左边面板【end】 -->

		<!-- 搜索面板【start】 -->
		<th:block th:include="include/search :: searchHTML"/>
		<th:block th:include="include/search :: searchJS"/>

		<!-- 搜索面板【end】 -->
		
	</div>
	
	<script type="text/javascript">
	$(function() {
		$('#id_panel_left_grid').css('height', (window.innerHeight - 40) + 'px');
	});
	</script>
</body>
		
</html>